<template>
  <div>
    <section class="section1">
      <div class="section1_top_content box_center">
        <div class="section1_top_content_ani animate_box">
          <div class="hyperos_wrap">
            <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/1_2.png?x-fds-process=image/resize,q_90,f_webp">
          </div>
          <strong>小米智能座舱</strong>
        </div>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/1.jpg?x-fds-process=image/resize,q_90,f_webp">
      </div>
    </section>
    <section class="section2">
      <div class="video_wrap">
        <video muted loop autoplay src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/2-video.mp4">
        </video>
      </div>
    </section>
    <section class="section3">
      <div class="content box_center">
        <p class="level1 animate_box">交互流畅 操作便捷</p>
        <div class="level2 animate_box">
          <p>多任务柔性框架</p>
          <p>像手机一样自由操作</p>
        </div>
        <div class="level3 animate_box">
          <p class="detail-item">采用多任务柔性框架，桌面应用可随意拖拽、改变大小，自动适配，打造个性化桌面。</p>
          <p class="detail-item">字体、图标、动效都和小米手机、平板视觉统一，操控体验无缝连接。</p>
        </div>
      </div>
      <div class="video_wrap box_center">
        <video muted loop autoplay src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/3-1.mp4"></video>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/3.jpg?x-fds-process=image/resize,q_90,f_webp">
      </div>
    </section>
    <section class="section4">
      <div class="animate_box">
        <p class="text">软硬件深度协同</p>
        <p class="text">车机更流畅，响应更顺滑</p>
      </div>
    </section>
    <section class="section5">
      <Carousel :list="carousels" />
      <div class="section5-bottom">
        <p>数据来自小米汽车实验室。启动速度指拉开车门到中控屏幕点亮时间。数据或因软件版本及测试环境等而有所差异。</p>
      </div>
    </section>
    <section class="section6">
      <div class="text_wrap">
        <div class="text animate_box">全面的生态共享能力</div>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/5.jpg?x-fds-process=image/resize,q_90,f_webp">
      </div>
    </section>
    <section class="section7">
      <div class="section7_content_wrap">
        <div class="content animate_box">
          <p class="level1">16.1 英寸 3K 超清大屏</p>
          <p class="level2">连通「人车家全生态」</p>
        </div>
        <div class="content animate_box">
          <p class="level3">16.1 英寸、3K 超清分辨率、16:10 黄金比例。</p>
          <p class="level4">不仅是超清中控大屏，更是连通「人车家全生态」的生态大屏。</p>
        </div>
      </div>
      <div class="video_wrap box_center">
        <video muted loop autoplay src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/6-1-video.mp4"></video>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/3.jpg?x-fds-process=image/resize,q_90,f_webp">
      </div>
    </section>
  </div>
</template>
<!-- animate__fadeInUp -->
<script>
import Carousel from '@/components/Carousel.vue';
export default {
  middleware({ store, redirect }) {
    console.log(store.state, "store.state");
    if (!store.state.user.token) {
      redirect({ name: 'login' })
    }
  },
  components: { Carousel },
  data: () => ({
    carousels: [
      {
        src: "https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/4-1.mp4",
        title: "更快的启动速度",
        desc: "以小米澎湃OS  跨域异构协同能力为基础，实现软硬件深度融合， 释放性能潜力。车机启动时间仅需 1.49 秒，带来疾速开机体验。",
      },
      {
        src: "https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/4-2.mp4",
        title: "更流畅的系统体验",
        desc: "基于小米澎湃OS 的一体化负载评估及分布式协作计算，进一步增强系统性能。应用打开更快，跟手性更好，系统操作更流畅。",
      },
      {
        src: "https://s1.xiaomiev.com/activity-outer-assets/web/automotiveos/4-3.mp4",
        title: "极速智能 OTA",
        desc: "创新应用流式升级技术，边下边刷，座舱升级时间最快 3 分钟，整车系统升级最快仅需 30 分钟。双区备份刷写，支持协同回滚，更加安全可靠。",
      },
    ]
  })
};
</script>

<style scoped>
@import url("../assets/css/smartcabin.css");
</style>